<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div>
          <el-input
            v-model="searchkey"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            style="width:200px ; margin-left:20px;"
          ></el-input>
          <el-button type="primary" style="margin-left:10px" @click="handleFilter">过滤</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button type="primary" @click="handleAdd=true">添加</el-button>
          <el-button type="primary" @click="HandleRefresh">刷新</el-button>
        </div>
      </el-col>
    </el-row>

    <div>
      <el-table :data="productList" style="width:100%" @current-change="edit" highlight-current-row>
        <el-table-column label="Id" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="productName"></el-table-column>
        <el-table-column label="商品价格" prop="price"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="">
            <el-button type="primary" @click="Update()">编辑</el-button>
            <el-button type="danger" @click="handleDel()">删除</el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-dialog title="编辑商品" :visible.sync="handleEdit" append-to-body>
        <el-form :model="formrus">
          <el-form-item label="修改商品Id" :label-width="formLabelWidth">
            <el-input v-model="formrus.ids"></el-input>
          </el-form-item>
          <el-form-item label="修改商品名称" :label-width="formLabelWidth">
            <el-input v-model="formrus.productNames"></el-input>
          </el-form-item>
          <el-form-item label="修改商品价格" :label-width="formLabelWidth">
            <el-input v-model="formrus.prices"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="handleEdit = false">取 消</el-button>
          <el-button type="primary" @click="handleEditData(scope)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { config } from "@vue/test-utils";
import app from "../../../store/modules/app";
export default {
  data() {
    return {
      productList: [],
      searchkey: "",
      handleAdd: false,
      handleEdit: false,
      form: {
        id: "",
        productName: "",
        price: ""
      },
      formrus: {
        ids: "",
        productNames: "",
        prices: ""
      },
      formLabelWidth: "120px"
    };
  },
  created: function() {
    this.productList = this.fetchList();
  },
  methods: {
    fetchList: function() {
      return [
        {
          id: 1,
          productName: "苹果",
          price: 6
        },
        {
          id: 2,
          productName: "香梨",
          price: 3
        },
        {
          id: 3,
          productName: "香蕉",
          price: 2
        },
        {
          id: 4,
          productName: "马铃薯",
          price: 4
        }
      ];
    },
    handleFilter: function() {
      var originList = this.fetchList();
      var list = originList.filter(
        item => item.productName.indexOf(this.searchkey) >= 0
      );
      this.productList = list;
    },
    add: function() {
      var app = {
        id: this.form.id,
        productName: this.form.productName,
        price: this.form.price
      };
      this.handleAdd = false;
      console.log(app);
      this.productList.push(app);
    },
    HandleRefresh: function() {
      this.productList = this.fetchList();
    },
    edit: function(val) {
      this.formrus.ids = val.id;
      this.formrus.productNames = val.productName;
      this.formrus.prices = val.price;
      console.log(val);
    },
    handleEditData(scope) { 
      this.handleEdit = false;
    },
    Update() {
      this.handleEdit = true;
    },
    handleDel: function() {
      this.$confirm("这个操作会永久删除这个水果喔，你确定吗？", "友情提示", {
        confirmButtonText: "是的",
        cancelButtonText: "再考虑一会",
        type: "warning"
      })
        .then(() => {
          this.productList.forEach((item, index) => {
            if (item.id == this.formrus.ids) {
              this.productList.splice(index, 1);
            }
          });

          this.$message({
            type: "success",
            message: "删除成功！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "哦吼，取消删除！"
          });
        });
      console.log(index);
    }
  }
};
</script>